import React from 'react';
import Grid from '@mui/material/Grid';
import Country from '../CountryCard/CountryCard';
import Skeleton from '../skeleton/Skeleton';

const CountriesList = ( {countries, page, loading, error, refreshAction} )=>{
  return (
  <>
    {!loading ? (
      <>
        {!error ? (
            <Grid container spacing={4}>
              {countries.slice(page * 8, page * 8 + 8).map( country =>{
                const {flag,name,population,region,capital,alpha3Code} = country;
                return <Country flag={flag} name={name} population={population} region={region} capital ={capital} alpha3Code={alpha3Code} key={alpha3Code} />
              }) }
          </Grid>
        ) : (
          <div className="text-2xl mt-7 font-medium space-y-5 text-gray-900 dark:text-white">
            <p>Error. Try again</p>
            <button onClick={refreshAction} className="dark:bg-darkelem shadow-md bg-white text-base px-3 py-2 rounded-md">Refresh</button>
          </div>
        )}
      </>
    ) : (
      <Grid container spacing={4} sx={{mt:5}}>
        {[1, 2, 3, 4, 5, 6, 7, 8].map((skeleton) => (
          <Skeleton sx={{m:3,p:3}} key={skeleton} />
        ))}
      </Grid>
    )}
  </>)
}

export default CountriesList;